<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<style type="text/css">
			html, body{
				background: #fff;
			}
			.mui-content{
				/*display: none;*/
				/*position:relative;*/
				margin-top:44px;
				padding:0px!important;
			}
			.mui-content-padded,.mui-content-time{
				margin:5px 10px 0px 10px;	
			}
			.mui-content-time span{
				color:#000;/*#9fa41c;*/
				/*font-weight: 700;*/
			}
			.mui-huodong-list:nth-child(1){
				margin-top:0px;
			}
			.mui-huodong-list{
				/*float: left;*/
				margin:10px 0px 0 0px;
				padding:10px;
				background: #f7f7f7;
				border-radius: 5px;
			}
			.mui-huodong-list p{
				margin:0; 
			}
			.mui-huodong-list:nth-child(1){
				/*margin-top:45px;*/
			}
			/*.mui-huodong-list:nth-child(2n){
				width:calc(50% - 20px);
				margin: 10px 10px 10px 0;
			}
			.mui-huodong-list:nth-child(2n+1){
				width:calc(50% - 10px);
				margin: 10px 10px;
			}
			.mui-huodong-list:nth-child(n+3){
				margin-top: 0px;
			}*/
			.mui-huodong-list img{
				height:220px;
				
			}
			.mui-huodong-date{
				font-size:12px;
			}
			.mui-huodong-list .mui-huodong-title{
				color:#333;
				margin:15px 0 5px;
				line-height: 18px;
			}
			.mui-action-back, .mui-icon-more-filled {
			    color: #ACACB4;
			}
		</style>
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			.mui-bar~.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				z-index: 1;
			}
			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			.mui-pull-top-tips .mui-pull-loading {
				/*-webkit-backface-visibility: hidden;
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;*/
				
				margin: 0;
			}
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			.mui-pull-top-wrapper .mui-icon.mui-reverse {
				/*-webkit-transform: rotate(180deg) translateZ(0);*/
			}
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			.mui-slider-indicator.mui-segmented-control {
				background-color: #efeff4;
			}
			.mui-scroll,.mui-table-view{
				/*height: 100%;*/
				background-color: #efeff4;
			}
			.mui-scroll{
				/*overflow: scroll;*/
			}
			.mui-table-view-cell{
				padding: 11px 10px;
			}
			.mui-table-view-cell.mui-active{
				background: none;
			}
		</style>
	</head>

	<body>
		<div class="mui-bar mui-bar-nav">
			<!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
			<h1 class="mui-title">全部活动</h1>
			<!--<span class="mui-icon mui-icon-more-filled mui-pull-right"></span>-->
		</div>
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell" id="mui-table-view-cell1">
										
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.pullToRefresh.js"></script>
		<script src="../js/mui.pullToRefresh.material.js"></script>
		<script>
			mui.init();
			(function($) {
				//阻尼系数
				var deceleration = mui.os.ios?0.003:0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration:deceleration
				});
				var num = 0;
				$.ready(function() {
					//循环初始化所有下拉刷新，上拉加载。
					$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
						$(pullRefreshEl).pullToRefresh({
							down: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										refreshPage();
										self.endPullDownToRefresh();
									}, 1000);
								}
							}
						});
					});
					var refreshPage = function() {
						get_activity_list(function(){
						//回调注册事件
						var mui_huodong_list = ca.className('mui-huodong-list');
						for (var i = 0, length = mui_huodong_list.length; i < length; i++) { //把每个button元素便利出来
				            var button = mui_huodong_list[i];
				            if (button.addEventListener) { //判断游览器的兼容问题，如果是ie8以下的用的是else语用代码段里的
				                button.addEventListener("tap", add_event)
				            } else {
				                button.attachEvent("tap", add_event)
				            }
				        }
					});
					};
				});
			})(mui);
		</script>
		<script src="../js/castapp.js"></script>
	<script src="../js/myapp.js"></script>
	<script>
		ca.init();
		//接收通知消息
		ca.receiveNotice("shijian",function(event){
			//获取对象id
			var isLoading = event.detail.isLoading;
			if(isLoading == 1){
				//延时加载
				lazyLoading('mui-content',function(){
					//初始化数据
					get_activity_list(function(){
						//回调注册事件
						var mui_huodong_list = ca.className('mui-huodong-list');
						for (var i = 0, length = mui_huodong_list.length; i < length; i++) { //把每个button元素便利出来
				            var button = mui_huodong_list[i];
				            if (button.addEventListener) { //判断游览器的兼容问题，如果是ie8以下的用的是else语用代码段里的
				                button.addEventListener("tap", add_event)
				            } else {
				                button.attachEvent("tap", add_event)
				            }
				        }
					});
				});
			}
			else{
				ca.className('mui-content')[0].style.display = 'block';
			}
		});
        //获取活动列表信息
		function get_activity_list(callBack){
			var access_token = localStorage.getItem('access_token');
			var url = request_url+'/api/public/get_activity_list';
			ca.get({
				url:url,
				data:{
					access_token:access_token
				},
				succFn:function(res){
					var json = JSON.parse(res);
					console.log(res);
					//ca.prompt(json.msg);
					if(json.status == 1){
						var html = '';
						var result = json.result;
						for(var i in result){
							html += '<div class="mui-huodong-list" data-id="'+result[i].id+'">';
							html += '<img class="lazyloading" data-original="'+result[i].smeta+'" src="'+result[i].smeta+'" width="100%" />';
							html += '<p class="mui-huodong-title">'+result[i]['post_title']+'</p>';
							html += '<p class="mui-huodong-date">'+result[i]['create_time'].substr(5,11)+'</p></div>';
						}
						ca.id('mui-table-view-cell1').innerHTML = html;
						callBack();
					}
					else{
						ca.prompt(json.msg);
					}
				}
			});
		}
		var flag = true;
		//触发执行事件
        function add_event(e) { //e.currentTarget触发该事件的元素    e.target则是目标节点元素
//      	console.log();
        	var thisEl = e.currentTarget;
        	var data_id = thisEl.getAttribute('data-id');
        	ca.newInterface({id:'huodong_detail',url:'huodong_detail.html'});
        	//发送通知
        	if(flag){
        		//防止点击过快
        		flag = false;
        		ca.sendNotice('huodong_detail','huodong_detail',{data_id:data_id});
        		setTimeout(function(){flag=true},500);
        	}
			
        	//console.log(thisEl.getElementsByTagName('p')[0].innerText);
        	//console.log(thisEl.getElementsByTagName('img')[0].src);
        	//console.log(thisEl.getAttribute('data-id'));
        }
        
		//下拉刷新
//		var num = 0;
//		ca.refreshDownLoad('mui-huodong-content',function(clearLoad){
//			console.log(num++);
//			setTimeout(function(){
//				clearLoad();
//			},2000);
//		});
</script>
	</body>

</html>